<template>
  <div class="demo-input-size">


    <el-input v-model="searchvalue" @change="seachFn()" class="w-50 m-2 seachinput" placeholder="请输入商品编码或商品名称或盘点人" />
    <el-button type="primary" @click="seachFn()">查询</el-button>
    <el-button type="success" @click="cleanFn()">清除</el-button>

  </div>
  <div class="sale">
    <div class="top_button">
      <div class="partition"></div>
    </div>

    <el-table :data="showsale" style="width: 100%" max-height="79vh" border v-loading="isres" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">

      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column v-for="(col, i) in cols2" :key="i" :prop="col.value" :label="col.name" sortable></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="EditFormVisible" title="Shipping address">
      <el-form :model="EditForm">
        <el-form-item label="盘点人" label-width="120">

          <el-input v-model="EditForm.user1" autocomplete="off" placeholder="盘点人" readonly />
        </el-form-item>
        <el-form-item label="产&nbsp;&nbsp;&nbsp;品" label-width="120">

          <el-input v-model="EditForm.pn" autocomplete="off" placeholder="产品" readonly />
        </el-form-item>
        <el-form-item label="生产日" label-width="120">
          <el-input v-model="EditForm.procreate" autocomplete="off" placeholder="修改生产日" />
        </el-form-item>
        <el-form-item label="到期日" label-width="120">
          <el-input v-model="EditForm.dqr_dd" autocomplete="off" placeholder="修改到期日" />
        </el-form-item>
        <el-form-item label="数&nbsp;&nbsp;&nbsp;量" label-width="120">
          <el-input v-model="EditForm.pd" autocomplete="off" placeholder="修改数量" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="EditFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="EditFormChangeFn(EditForm)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <div class="demo-pagination-block" :class="{ visibilityclass: isActive }">

    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[50, 100, 200, 400]"
      :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
  <tool :multipleTable="sale"></tool>
</template>
<script>
import { reactive, toRefs, ref, nextTick } from "vue";
import { updqr } from "@/api/pandian";
import { Inventory } from "@/api/pandian";
import { ElMessage } from "element-plus";

import tool from "./components/tool";



export default {
  components: {
    tool,
  },
  setup() {
    const small = ref(false)
    const background = ref(false)
    const disabled = ref(false)
    const currentPage4 = ref(1)
    const pageSize4 = ref(100)
    let searchvalue = ref()
    const total = ref(0)
    let isActive = ref(false)
    const data = reactive({
      cols: [],
      cols2: [{ name: 'ID', value: 'id' }, { name: '仓库', value: 'ck' }, { name: 'hj', value: 'hj' },
      { name: 'kw', value: 'kw' }, { name: '盘点人', value: 'user1' }, { name: '商品编码', value: 'pc' },
      { name: '商品名称', value: 'pn' }, { name: '条形码', value: 'barcode' }, { name: '有效期', value: 'dqr_dd' },
      { name: '保质期', value: 'dqr' }, { name: '盘点数', value: 'pd' }, { name: '盘点时间', value: 'pdtime' }
        , { name: '箱规', value: 'probox' }, { name: 'universal', value: 'universal' }, { name: '生产日期', value: 'procreate' },],
      sale: [],
      showsale: [],
      isres: false,
      EditFormVisible: false,
      EditForm: {}

    });
    const loaded = async () => {
      data.isres = true;

      const result = await Inventory.get();
      // result.data = JSON.parse(result.data);
      data.isres = false;
      if (result.data.length == 0) {
        data.sale = [];
        ElMessage.success({
          message: "还没有盘呢",
          type: "success",
        });
      } else {
        data.sale = result.data.filter((item) => item.ck == '小仓');
        console.log(data);
        total.value = data.sale.length

        data.showsale = data.sale.slice((currentPage4.value - 1) * pageSize4.value, pageSize4.value * currentPage4.value)



        data.cols = Object.keys(result.data[0]);


      }
    };
    loaded();
    const handleSizeChange = (val) => {

      pageSize4.value = val
      loaded();
    }
    const handleCurrentChange = (val) => {

      currentPage4.value = val
      loaded();
    }

    const handleEdit = (index, row) => {

      data.EditForm = row
      data.EditFormVisible = true

      console.log(index, row)
    }
    const handleDelete = (index, row) => {
      console.log(index, row)
    }
    const EditFormChangeFn = (val) => {
      preservation(val.id, val.pd, val.dqr_dd, val.procreate)
      data.EditFormVisible = false
      loaded()

    }
    const seachFn = () => {

      if (searchvalue.value) {
        console.log(isActive.value);
        nextTick(() => {
          isActive.value = true
        })
        console.log(searchvalue.value);
        data.showsale = []
        // const existingitem=[]
        data.sale.filter((item) => {
          if (item.pc.split(searchvalue.value).length > 1 || item.pn.split(searchvalue.value).length > 1 || item.user1.split(searchvalue.value).length > 1) {
            data.showsale.push(item)
          }
          // console.log(data.showsale);
          isActive.value = false
          return data.showsale
        })
      } else {
        if (data.showsale.length > 1000) {
          return
        } else {
          nextTick(() => {
            isActive.value = false
            loaded();

          })



        }

      }

      // data.sale.filter()

    }
    const cleanFn = () => {
      searchvalue.value = ''
      seachFn()
    }
    const preservation = async (id, newnum, newdqr, newprocreate) => {
      console.log('post', id, newnum, newdqr, newprocreate);
      const result = await updqr.post({
        id,
        upnum: newnum,
        updqr: newdqr,
        upprocreate: newprocreate
      });
      if (result.code == 200) {
        ElMessage.success({
          message: "恭喜你，这是一条成功消息",
          type: "success",
        });
        loaded();
      } else {
        ElMessage.success({
          showClose: true,
          message: "错了哦，这是一条错误消息",
          type: "error",
        });
      }
    };
    return { ...toRefs(data), cleanFn, isActive, small, searchvalue, background, disabled, handleDelete, seachFn, handleEdit, preservation, pageSize4, currentPage4, EditFormChangeFn, total, handleSizeChange, handleCurrentChange };
  },
};
</script>
<style scoped>
.demo-pagination-block {
  z-index: 500;
  position: fixed;
  bottom: 0;
  width: 30%;

}

.seachinput {
  margin: 10px;
  width: 32% !important;
}

.visibilityclass {
  visibility: hidden
}
</style>